<template>
  <div @click.stop.prevent="">
    <Card class='toInfo_parent'>
      <div class="toinfo_wrap">
        <div class='cardFirst'>
          <span class="card_head">
            <div class="images" style="cursor:pointer" v-viewer @click.capture.stop="showHeaderImg(viewTarget)">

              <img draggable="false" :onerror="defaultImg" viewer='true' style="width:64px;height:64px;"
                class="img-border"
                :src="!$isNull(viewTarget.head) ? (`${$store.state.headPathUrl}${viewTarget.id}${viewTarget.head}.PNG`) : `static/image/home/person_${this.viewTarget.gender == 1 ? 1 : 2}.png`" />
              <img v-if="toInfo.isGroup == '0' && toInfo.status != '7'" class="head_status" :src="statusFn()" alt="">
            </div>
          </span>
          <div class="card_n">
            <h2>
              <b>{{ viewTarget.name }}</b>
            </h2>
          </div>
          <div class="card_close" @click.stop.prevent="cardClose">
            <img src="static/image/home/closeWindow.png">
          </div>
        </div>
        <ul @click.stop.prevent="copyShow = false" class="info_card">
          <li v-for='(item, index) in personInfoList' :key="index + 'card'" @contextmenu.stop="rightClick">
            <span class="info_title">{{ item.title }}</span>
            <template v-if="index < 3">
              <span v-if='index != 2'>{{ viewTarget[item.field] || '--' }}</span>
              <span v-else>{{ (viewTarget[item.field]) == 2 ? "女" : "男" }}</span>
            </template>
            <Tooltip v-else class="dxTooltip" :content="viewTarget[item.field] || '--'" placement="top">
              <span>{{ viewTarget[item.field] || '--' }}</span>
            </Tooltip>
          </li>
          <li class="last" v-if='(viewTarget.id || viewTarget.ID) != myInfo.id'>
            <span class="info_title">常用联系</span>
            <img v-if='viewTarget.ifLinkman' src="static/image/home/box_selected.png" alt=""
              @click.stop.prevent="personItem(0)">
            <img v-else src="static/image/home/box_selection.png" alt="" @click.stop.prevent="personItem(1)">
          </li>
        </ul>
        <div class="to_c_btn_w"
          v-if='(viewTarget.id || viewTarget.ID) != myInfo.id && (viewTarget.id || viewTarget.ID) != toInfo.id'>
          <Button type='info' long style='margin-bottom: 1.5em;width: 180px;'
            @click.native.stop.prevent='newChat(viewTarget, false)'>发送消息</Button>
        </div>
      </div>
    </Card>
    <div class="copy_paste_btn" v-if="copyShow" :style="{ top: pasteMenuTop + 'px', left: pasteMenuLeft + 'px' }">
      <span @click.stop.prevent="copyValue($event)">复制</span>
      <span @mousedown="copyShow = false">取消</span>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    viewTarget: {
      type: Object,
      default: {},
    },
    toInfo: {
      type: Object,
      default: {},
    },
    ifLinkman: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {

      // defaultImg:'this.src="' + require('../../../static/image/home/person_1.png') + '"',
      defaultImg: 'this.src="static/image/home/person_1.png"', //zk1224修改
      copyShow: false,
      pasteMenuTop: 0,
      pasteMenuLeft: 0,
      text: ''
    };
  },
  filters: {
    setName(info) {
      let sName = info;
      if (sName.length > 3) sName = sName.slice(0, 3) + "...";
      return sName;
    },
  },
  computed: {
    ...mapState(["myInfo", "personInfoList", "user_hot_key"]),
  },
  mounted() {


  },
  methods: {
    copyValue(e) {
      this.copyShow = false;

      // 到粘贴板
      // 2022/6/21空内容复制判断
      if (this.text == "") return this.$Message.warning("复制内容为空");
      // this.pasteVal = this.copyText;
      if (window.navigator.clipboard) {
        window.navigator.clipboard.writeText(this.text).then(
          () => {
            this.$Message.success("内容已复制到粘贴板");
          },
          () => {
            console.log("失败");
          }
        );
      } else {
        let value = this.text;
        let ipt = document.createElement("input");
        ipt.value = value;
        document.body.appendChild(ipt);
        ipt.select();
        document.execCommand("Copy");
        this.$Message.success("内容已复制到粘贴板");
        ipt.remove();
      }
    },
    //获取坐标位置
    getItemCoordinate(e) {
      console.log(e.clientY, e.clientX);
      this.pasteMenuTop = e.clientY - 10 || 0;
      this.pasteMenuLeft = e.clientX - 10 || 0;
    },
    rightClick(e) {
      this.getItemCoordinate(e)
      this.copyShow = true
      var selection = window.getSelection()
      var selectionText = selection.toString().trim()
      this.text = selectionText

    },
    showHeaderImg(data) {
      console.log(data, 84);
      let headPathUrl =
        this.$store.state.headPathUrl.match(/([\s\S]*)UserFiles/)[1];

      let imgFile =
        this.viewTarget.gender == 1 ? "person_1_big.png" : "person_2_big.png";

      let newSrc = headPathUrl + "dist/static/image/home/" + imgFile;

      let src = !this.$isNull(this.viewTarget.head)
        ? `${this.$store.state.headPathUrl}${this.viewTarget.id}${this.viewTarget.head}.png`
        : newSrc;

      let srcData = [
        {
          Suffix: "png",
          ThumbnailPath: src,
        },
      ];

      let info = this.$shell("OpenWatchPicFormczs", [
        JSON.stringify(srcData),
        0,
      ]);
      console.log(info, 104);
    },
    statusFn() {
      // 2022/6/21 修改为当前浏览信息的状态
      switch (this.viewTarget.status) {
        case "1":
          return "static/image/home/chat/icon_online_nor.png";
        case "3":
          return "static/image/home/chat/icon_leave_nor.png";
        case "4":
          return "static/image/home/chat/icon_busy_nor.png";
        case "6":
          return "static/image/home/state_meeting_corner.png";
      }
    },
    newChat() {
      console.log(this.viewTarget, "this.viewTarget");
      this.$emit("newChat", this.viewTarget, false);
    },
    personItem(index) {
      this.$emit("personItem", index);
    },
    cardClose() {
      this.$emit("cardClose", false);
    },
  },
};
</script>
<style scoped lang="less">
.toInfo_parent {
  height: 100%;
}

.copy_paste_btn {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  font-size: 1.2em;
  color: #fff;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  z-index: 9999;

  &>span {
    padding: 0.7em;

    &:hover {
      background: #999;
    }
  }
}
</style>
